<!--
 * @Author: 四川华西绿舍建材有限公司
 * @Date: 2024-03-02 21:20:27
 * @LastEditors: 陈波
 * @LastEditTime: 2024-03-02 22:18:17
 * @Description: 
 * @FilePath: \graDesign\src\components\BasicDescriptions\index.vue
-->
<template>
  <el-descriptions 
    class="margin-top" 
    :column="column" 
    :size="size"
    border
  >
    <!-- 循环生成 -->
    <el-descriptions-item 
        v-for="(item, index) in dataList" 
        :key="index"
        :span="item.span"
        :width="item.width"
        :align="item.align"
    >
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <component :is="item.icon" />
          </el-icon>
          {{ item.label }}
        </div>
      </template>
      {{ item.value }}
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface IDataListItem {
  label: string
  value: string
  icon: any
  span: number
  width?: number
  align?: 'left' | 'center' | 'right'
}

// 接口
interface DescriptionProp {
    size?: '' | 'large' | 'default' | 'small'
    column?: number
    dataList?: Array<IDataListItem>
}
// 接受父组件参数，配置默认值
const props = withDefaults(defineProps<DescriptionProp>(), {
    size: '',               
    column: 2,              // 每列最多放几个
    dataList: () => []      // 数据源列表
});


const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[props.size] || marginMap.default,
  }
})

</script>

<style scoped lang="scss">
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}

</style>
